<template>
  <div class="popup-wrap" v-show="show">
    <div class="popup-mask" @click.stop="clickMask"></div>
    <div class="popup-body middle">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  .popup-wrap {
    .popup-mask {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      background: rgba(0,0,0,0.30);
    }
    .popup-body {
      position: fixed;
      &.middle {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
</style>

<script type="text/babel">
  /**
   * Author: Lily Jiang
   * Create Time: 2019/10/11
   * Description:
   */

  export default {
    name: "Popup",
    components: {},
    props: {
      show: {
        type: Boolean,
        default: false
      },
      closeOnClickMask: {   //  是否可以通过点击 mask 层来关闭 popup
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {
      clickMask () {
        if (this.closeOnClickMask) {
          this.show = false
        }
      }
    },
    mounted() {
    },
  }
</script>

